<template>
    <div class="classification">
        <h2>菜品管理</h2>
        <div class="add" @click="add">
            <el-button type="primary" plain>添加</el-button>
        </div>
        <el-table
                :data="tableData"
                border
                width="100%"
                class="myTable"
                height="670"
        >
            <el-table-column
                    prop="food_id"
                    label="菜品编码"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="classification_id"
                    label="菜品分类编码"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="菜品"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="inventory"
                    label="库存"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="recommended"
                    label="是否推荐，1表示不推荐，0表示推荐"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="is_delete"
                    label="上下架，1表示下架，0表示上架"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="sales_down"
                    label="线下销售额"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="sales_up"
                    label="线上销售额"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="图片"
                    width="300">
                <template slot-scope="scope">
                    <img :src="scope.row.picture" alt="" class="myImg">
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200"
            >
                <template slot-scope="scope">
                    <el-button
                            style="margin-right: 10px"
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            @click="change(
                                `${scope.row.food_id}`,
                                `${scope.row.classification_id}`,
                                `${scope.row.name}`,
                                `${scope.row.inventory}`,
                                `${scope.row.recommended}`,
                                `${scope.row.price}`,
                                `${scope.row.picture}`
                                )"
                    >
                    </el-button>
                    <el-button v-if="!scope.row.is_delete" type="danger" icon="el-icon-delete" circle @click="myDelete(`${scope.row.food_id}`,`${scope.row.name}`)"></el-button>
                    <el-button v-if="scope.row.is_delete" type="info" icon="el-icon-refresh-right" circle @click="restore(`${scope.row.food_id}`)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer
                :title="title"
                :visible.sync="drawer"
                :direction="direction"
        >
            <hr>
            <div>
                <p v-if="!flag">菜品分类编码</p>
                <el-input
                        v-if="!flag"
                        prefix-icon="el-icon-s-grid"
                        v-model="categoryId"
                        disabled
                        style="margin-bottom: 20px"
                >
                </el-input>
                <p v-if="!flag">菜品类型</p>
                <el-input
                        v-if="!flag"
                        prefix-icon="el-icon-menu"
                        v-model="categoryName"
                        disabled
                        style="margin-bottom: 20px"
                >
                </el-input>
                <p v-if="!flag">选择</p>
                <select id="test" value="0" v-if="!flag" @click="selectChange" style="width: 100%;margin-bottom: 20px">
                    <option v-for="(item,index) in list" :value="index" :key="index" :data-id="item.id">{{item.id}}/{{item.name}}</option>
                </select>
                <p>菜品名称</p>
                <el-input
                        placeholder="请输入商品标题"
                        prefix-icon="el-icon-chat-round"
                        v-model="foodname"
                        style="margin-bottom: 20px"
                >
                </el-input>
                <p>菜品库存</p>
                <el-input
                        placeholder="请输入商品库存"
                        prefix-icon="el-icon-box"
                        v-model="inventory"
                        style="margin-bottom: 20px"

                >
                </el-input>
                <p>菜品价格</p>
                <el-input
                        placeholder="请输入商品价格"
                        prefix-icon="el-icon-coin"
                        v-model="price"
                        style="margin-bottom: 20px"
                >
                </el-input>
                <p>是否推荐菜品</p>
                <el-input
                        placeholder="请输入0或者1，0表示推荐，1表示不推荐"
                        prefix-icon="el-icon-thumb"
                        v-model="recommended"
                        style="margin-bottom: 20px"

                >
                </el-input>
                <p>商品图片</p>
                <el-input
                        placeholder="请输入商品图片"
                        prefix-icon="el-icon-picture-outline-round"
                        v-model="picture"
                        style="margin-bottom: 20px"
                >
                </el-input>
                <div>
                    <img :src="picture" alt="" style="width: 100%">
                </div>
                <h4 style="margin-bottom: 20px">或者上传本地图片为商品图片</h4>
                <form action="#">
                    <input type="file" ref="myfile">
                </form>
                <div style="margin-top: 20px">
                    <el-button type="primary" @click="myupload" style="margin-bottom: 20px">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </div>
                <el-button type="primary" icon="el-icon-edit" circle @click="change1" v-if="flag" style="margin-bottom: 50px"></el-button>
                <el-button type="primary" icon="el-icon-plus" circle @click="add1" v-if="!flag" style="margin-bottom: 50px"></el-button>
            </div>
        </el-drawer>
        <div style="overflow: hidden">
            <div style="float: right;margin-top:20px;margin-right: 10%;margin-bottom: 50px">
                <button @click="lastye" :disabled="sum <= 1 ? true : false" style="margin-right: 20px">上一页</button>
                <button @click="nextye" :disabled="cursor">下一页</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {getfood, getfoodclass, addfood, changefood, changefood1, recommendedfood, deletefood, pictureL} from '../api/api'
    export default {
        name: "Classification",
        data() {
            return {
                username:'',
                password:'',
                list:[],
                tableData: [],
                drawer: false,
                direction: 'rtl',
                title:'', //右弹框标题
                categoryId:'', //菜品分类id
                categoryName:'', //菜品分类name
                id:'',//菜品id
                name:'',  //菜品名字
                foodname:'',//菜品名字
                inventory: 100, //库存
                price:10,    //价格
                picture:'', //图片
                recommended:1, //是否推荐 0推荐 1不推荐
                is:0, //上下架 0上架 1下架
                fileList:[],
                fileList1:[],
                flag:true,
                sum:1,
                cursor:false
            }
        },
        methods: {
//上传图片
            myupload(){
                console.dir(this.$refs.myfile.files[0])
                pictureL(this.$refs.myfile.files[0]).then(res=>{
                    if(res.status == 200){
                        this.picture = res.data.url
                    }
                })
            },
            //修改
            change(food_id, classification_id, name, inventory, recommended, price, picture) {
                this.drawer = true
                this.flag = true
                this.title = '修改菜品'
                this.id = food_id
                this.categoryId = classification_id
                this.name = name
                this.inventory = inventory
                this.recommended = recommended
                this.price = price
                this.picture = picture
                this.foodname = name
            },
            change1(){
                recommendedfood(this.id, this.recommended).then(res=>{
                    console.log(res)
                })
                if(this.name == this.foodname){
                    changefood1(this.id, this.categoryId, this.price, this.picture, this.inventory).then(res=>{
                        if(res.status == 0){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                        this.class(`${this.sum}`)
                        this.drawer = false
                    })
                }else {
                    changefood(this.id, this.foodname, this.categoryId, this.price, this.picture, this.inventory).then(res=>{
                        if(res.status == 0){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                        this.class(`${this.sum}`)
                        this.drawer = false
                    })
                }

            },
            //删除
            myDelete(id,title) {
                this.$confirm(`确定删除编码为${title}的商品嘛?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deletefood(`${id}`, 1).then(res=>{
                        if(res.status == 0){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                        this.class(`${this.sum}`)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //恢复
            restore(id){
                deletefood(`${id}`, 0).then(res=>{
                    if(res.status == 0){
                        this.$message({
                            message: '恢复成功',
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: '恢复失败',
                            type: 'error'
                        });
                    }
                    this.class(`${this.sum}`)
                })
            },
            //添加
            add() {
                getfoodclass().then(res=>{
                    if(res.status == 0){
                        this.list = res.data
                        this.categoryId = res.data[0].id
                        this.categoryName = res.data[0].name
                    }
                })
                this.drawer = true
                this.flag = false
                this.title = '添加菜品'
            },
            add1() {
                addfood(this.name, this.categoryId, this.price, this.picture, this.inventory).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: '添加失败',
                            type: 'error'
                        });
                    }
                    this.drawer = false
                    this.class(1)
                })

            },
            //获取所有菜品
            class(n) {
                getfood(`${n}`,10).then(res=>{
                    console.log(res)
                    if(res.status == 0) {
                        this.tableData = res.data
                    }
                })
            },
            //选择菜品分类
            selectChange(){
                let myselect = document.getElementById("test")
                let index = myselect.selectedIndex
                let text = myselect.options[index].text
                this.categoryId = text.split('/')[0]
                this.categoryName = text.split('/')[1]
                // console.log(text.split('/'))
            },
            // 上一页
            lastye(){
                if(this.sum > 1){
                    this.sum = this.sum - 1
                    this.class(`${this.sum}`)
                }
                this.cursor = false
            },
            // 下一页
            nextye(){
                this.sum =this.sum + 1
                this.class(`${this.sum}`)
                getfood(`${this.sum}+1`,10).then(res=>{
                    if(res.status == 0) {
                        if(res.data.length == 0){
                            this.cursor = true
                        }
                    }
                })
            }
        },
        created() {
            this.class(1)
        }
    }
</script>

<style scoped>
    .classification {
        width: 100%;
        padding-left: 50px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .myTable {
        margin-top: 30px;
    }
    /deep/.cell {
        text-align: center;
    }
    .add {
        margin-left: 75%;
    }
    .myImg {
        width: 100px;
        height: 100px;
    }
    /deep/.el-drawer__body{
        padding: 0 30px;
    }
    hr {
        margin-bottom: 30px;
    }
    /deep/.el-button+.el-button {
        margin-top: 10px;
        margin-left: 0px !important;
    }
    #test {
        height: 40px;
        align-items: center;
    }

</style>
